<template>
	<!-- 
			浮窗组件，某些块移入显示浮窗
			存放在需要的组件区域，比如header
			接收定位offset，以及根据哪个元素位置定位，插槽内容
			内容父级提供，只负责显示框，隐藏框，以及基础骨架，相对父级的定位，不获取数据 -->
	<div 
		class="pops" 
		:style="{left: posi.x+'px', top: posi.y+'px'}" 
		ref="pops" 
		@mouseover="flag=true" 
		@mouseleave="flag=false"
		>
		<slot></slot>
	</div>
</template>

<script>
export default{
	props:{
		// 浮窗定位
		posi:{
			type: Object,
			default: ()=>({
				x: 0,
				y: 0
			})
		},
		// 控制显示隐藏
		show:{
			type: Boolean,
			default: false
		}
	},
	data(){
		return{
			timer1: undefined,
			timer2: undefined,
			timer3: undefined,
			flag: false
		}
	},
	watch:{
		show(val){
			this.flag=val;
		},
		flag(val){
			val ? this.inner() : this.outer();
		}
	},
	methods:{
		// 移入时，清除隐藏定时器，显示浮窗
		inner(){
			clearTimeout(this.timer1);
			clearTimeout(this.timer2);
			if(!this.$refs.pops) return;
			this.$refs.pops.style.display = 'block';
			this.timer3 = setTimeout(()=>{
				if(!this.$refs.pops) return;
				this.$refs.pops.style.opacity = 1;
				this.$refs.pops.style.marginTop = '0';
			},500)
		},
		// 移出时，取消定时显示，隐藏浮窗，还原位置
		outer(){
			clearTimeout(this.timer3);
			this.timer1 = setTimeout(()=>{
				if(!this.$refs.pops) return;
				this.$refs.pops.style.opacity = 0;
				this.$refs.pops.style.marginTop = '-12px';
				this.timer2 = setTimeout(()=>{
					if(!this.$refs.pops) return;
					this.$refs.pops.style.display = 'none';
				},500)
			},300)
		}
	}
}
</script>

<style lang="less" scoped>
.pops{
	position: absolute;
	display: none;
	margin-top: -12px;
	transition: margin-top .3s, opacity .5s;
	transition-delay: .2s;
	opacity: 0;
	z-index: 30;
}
.show{
	opacity: 1;
	margin-top: 0;
}
</style>
